import { createContext, useContext, useState } from "react";
// 爷孙组件通信 App -> A -> B

// 1.使用createContext方法创建一个上下文对象
const MsgContext = createContext();

function App() {
  const msg = "this is app msg";
  return (
    <>
      {/* 2.在顶层组件 通过Provider组件提供数据 */}
      <MsgContext.Provider value={msg}>
        <div>this is App component</div>
        <A />
      </MsgContext.Provider>
    </>
  );
}

function A() {
  return (
    <>
      <div>this is A component</div>
      <B />
    </>
  );
}

function B() {
  // 3.在底层组件 通过useContext钩子函数使用数据
  const msg = useContext(MsgContext);
  return (
    <>
      <div>this is B component,{msg}</div>
    </>
  );
}

export default App;
